<template>
  <div class="pillar-query-list h-flex">
    <!-- <a href="javascript:;" class="prev" @click="prevPillarPage"><i class="el-icon-caret-left" /></a> -->
    <div class="pillar-pager-container h-flex" style="flex:1">
      <div class="pillar-group-container">
        <el-tabs v-model="activeSiteName" type="card" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in siteTabs"
            :key="index"
            :label="item.siteName"
            :name="`${index}`">
            <div ref="pageContainer" class="pillar-group">
              <el-tabs v-model="activePillarName" v-loading="loading" type="card" @tab-click="handleClick2">
                <el-tab-pane
                  v-for="(item2, index2) in pillarTabs"
                  :key="index2"
                  :label="item2.pillarNum"
                  :name="`${index2}`" />
              </el-tabs>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- <a href="javascript:;" class="next" @click="nextPillarPage"><i class="el-icon-caret-right" /></a> -->
    <div class="pillar-seacher">
      <div class="form h-flex">
        <el-input v-model="pillarNum" placeholder="请输入支柱号" @keyup.enter.native="searchByPillar()">
          <i slot="prefix" class="el-input__icon el-icon-search " @click="searchByPillar()" />
        </el-input>
        <el-button type="primary" size="mini" class="form-button" @click="searchByPillar()">搜索</el-button>
      </div>
      <div class="result-info">当前第{{ parseInt(activePillarName)+1 }}个/总共{{ pillarTabs.length }}个支柱</div>
    </div>
  </div>
</template>
<script>
import { getC4IndexPillarListByDetectJobIdAndSiteId, getC4IndexSiteListByDetectJobId } from '@/api/cms/detect-data'
export default {
  name: 'PillarList',
  props: {
    pillarPager: {
      type: Array
    },
    pillarTabsParent: {
      type: Array
    },
    detectJobId: {
      type: String
    }
  },
  data() {
    return {
      activeSiteName: '0',
      activePillarName: '0',
      loading: false,
      siteId: '',
      siteName: '',
      siteTabs: [],
      pillarTabs: [],
      detectJobIdss: '',
      pillarNum: ''
    }
  },
  watch: {
    pillarPager(val) {
      this.siteTabs = val
    },
    detectJobId(val) {
      this.detectJobIdss = val
    },
    pillarTabsParent(val) {
      this.pillarTabs = val
      var vals = []
      vals.index = 0
      this.handleClick2(vals)
    }
  },
  mounted() {
  },
  methods: {
    handleClick(tab, event) {
      this.activePillarName = '0'
      this.loading = true
      getC4IndexPillarListByDetectJobIdAndSiteId({ detectJobId: this.detectJobIdss, siteId: this.siteTabs[tab.index].siteId }).then(res => {
        this.pillarTabs = res.data
        this.loading = false
        this.siteId = this.siteTabs[tab.index].siteId
        this.siteName = this.siteTabs[tab.index].siteName
        this.$emit('setDeviceCode', this.siteId, this.siteName, this.pillarTabs[tab.index].pillarNum, this.pillarTabs[0].pillarId)
      })
    },
    handleClick2(tab, event) {
      this.loading = true
      if (this.siteId === '') {
        this.$emit('setDeviceCode', this.siteTabs[0].siteId, this.siteTabs[0].siteName, this.pillarTabs[tab.index].pillarNum, this.pillarTabs[tab.index].pillarId)
        this.loading = false
      } else {
        this.$emit('setDeviceCode', this.siteId, this.siteName, this.pillarTabs[tab.index].pillarNum, this.pillarTabs[tab.index].pillarId)
        this.loading = false
      }
    },
    searchByPillar() {
      var indexnum = -1
      for (let i = 0; i < this.pillarTabs.length; i++) {
        if (this.pillarTabs[i].pillarNum === this.pillarNum) {
          indexnum = i
        }
      }
      if (indexnum < 0) {
        this.$message({
          message: '没有此支柱号！',
          type: 'warning'
        })
      } else {
        this.activePillarName = `${indexnum}`
        this.$nextTick(_ => {
          this.$refs.pageContainer[this.activeSiteName].scrollLeft = `${indexnum * 58}`
          this.siteId = this.siteTabs[this.activeSiteName].siteId
          this.siteName = this.siteTabs[this.activeSiteName].siteName
          this.$emit('setDeviceCode', this.siteId, this.siteName, this.pillarTabs[indexnum].pillarNum, this.pillarTabs[indexnum].pillarId)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .pillar-query-list {
    .prev,.next {
      width:24px;
      line-height: 80px;
      color: white;
      text-align: center;
      background: #409eff;
    }

    .pillar-pager-container {
      justify-content: flex-start;
      overflow: hidden;
      padding-left:4px;
      border-right: 1px#E4E7ED solid;

      .pillar-group-container {
        width: 100%;
        overflow-x: auto;
        ::v-deep .el-tabs__item{
          height: 32px;
          line-height: 32px;
          color: black;
        }
        ::v-deep .el-tabs__header{
          margin: 0;
        }
        ::v-deep .is-active{
          color: #409eff;
        }
      }

      .pillar-group::-webkit-scrollbar:hover,
      .pillar-group::-webkit-scrollbar {
        width: 0;
        height: 5px;
        background-color: #dfdddd;
        -webkit-transition: background-color 0.3s ease-in-out;
        transition: background-color 0.3s ease-in-out;
      }

      .pillar-group::-webkit-scrollbar-track {
        background-color: #dfdddd;
      }

      .pillar-group::-webkit-scrollbar-thumb,
      .pillar-group::-webkit-scrollbar-thumb:hover,
      .pillar-group::-webkit-scrollbar-thumb:active {
        background-color: #409eff;
        border: 0;
      }

      .pillar-group {
        display: flex;
        width: 100%;
        overflow-x: auto;
        line-height: 34px;

        .item {
          height: 34px;
          margin: 4px 3px 1px 0;
          width: 55px;
          color: #fff;
          text-align: center;
          cursor: pointer;
          background: #409eff;
          &:hover,
          &.current {
            background: #f0bc63;
          }

          &:last-child {
            border-right: 0;
          }
        }

      }
    }

    .pillar-seacher {
      width: 260px;
      padding: 5px;

      .form {
        border: 1px#E4E7ED solid;
        background: white;
        input {
          padding-left: 5px;
          color: black;
          background: transparent;
          border: 0;
          outline: none;
        }
        // button {
        //   width: 30px;
        //   height: 30px;
        //   color: black;
        //   cursor: pointer;
        //   background: transparent;
        //   border: 0;
        //   outline: none;
        // }
      }

      .result-info {
        font-size: 14px;
        line-height: 44px;
        color: black;
      }
    }
  }
</style>
